<script setup lang="ts">
import { ref } from "vue";
import BaseInfo from "./baseInfo.vue";
import CoursewareInfo from "./coursewareInfo.vue";
import PublishRank from "./publishRank.vue";
import PreviewInfo from "./previewInfo.vue";
import { useLmsStoreHook } from "@/store/modules/lms";
import { useRouter } from "vue-router";

const lmsStore = useLmsStoreHook();
const router = useRouter();
const cliLastBut = () => {
  if (lmsStore.currStep == 0) {
    return;
  }
  lmsStore.currStep--;
};

const createCourseRef = ref();
const bindCoursewareRef = ref();
const publishCourseRef = ref();

const clickSubmitBut = () => {
  switch (lmsStore.currStep) {
    case 0:
      // 提交基础信息
      createCourseRef.value.commitForm();
      break;
    case 1:
      //提交课件绑定信息
      bindCoursewareRef.value.commitForm();
      break;
    case 2:
      //提交发布范围
      publishCourseRef.value.commitForm();
      break;
    default:
  }
};

const clickBackBut = () => {
  router.push("/lms/course/index");
};
</script>

<template>
  <div>
    <el-card>
      <div class="main">
        <el-row>
          <el-col :span="4" />
          <el-col :span="16">
            <el-row>
              <el-steps
                :active="lmsStore.currStep"
                finish-status="success"
                class="step-row"
              >
                <el-step title="基本信息" />
                <el-step title="课件信息" />
                <el-step title="课程信息" />
                <el-step title="完成" />
              </el-steps>
            </el-row>
            <el-row class="content-div">
              <BaseInfo v-show="lmsStore.currStep == 0" ref="createCourseRef" />
              <CoursewareInfo
                v-show="lmsStore.currStep == 1"
                ref="bindCoursewareRef"
              />
              <PublishRank
                v-show="lmsStore.currStep == 2"
                ref="publishCourseRef"
              />
              <PreviewInfo v-show="lmsStore.currStep == 3" />
            </el-row>
            <el-row>
              <el-button
                type="primary"
                @click="cliLastBut"
                :disabled="lmsStore.currStep == 3"
                >上一步</el-button
              >
              <el-button
                type="primary"
                @click="clickSubmitBut"
                v-show="lmsStore.currStep != 3"
                >提交</el-button
              >
              <el-button type="primary" @click="clickBackBut">返回</el-button>
            </el-row>
          </el-col>
          <el-col :span="4" />
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.content-div {
  height: 70vh;
}

.step-row {
  width: 100%;
}
</style>
